<template>
  <a-drawer
    title="话术库"
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleClose"
    :visible="visible"
    style="height: 100%; overflow: auto; padding-bottom: 53px"
  >
    <a-tabs :active-key="type" @change="handleChange" style="margin-top:30px">
      <a-tab-pane v-for="pane in panes" :key="pane.dataId" :tab="pane.categoryName">
        <a-spin :spinning="confirmLoading">
          <a-list :data-source="activities">
            <a-list-item slot="renderItem" slot-scope="item" @click="handleClick(item)">
              {{ item }}
            </a-list-item>
          </a-list>
        </a-spin>
      </a-tab-pane>
    </a-tabs>
  </a-drawer>
</template>

<script>
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import { postAction } from '@/api/manage'
import { mapGetters } from 'vuex'

export default {
  name: 'FoodModal',
  components: {},
  data() {
    return {
      drawerWidth: 700,
      visible: false,
      panes: [],
      type: 0,
      activities: [],
      uploadLoading: false,
      confirmLoading: false
    }
  },
  created() {},
  methods: {
    ...mapGetters(['doctorId', 'orgCode']),
    add() {
      this.visible = true
      this.getType()
      this.resetScreenSize()
    },
    getList(type) {
      this.confirmLoading = true
      postAction('/201/02/2010217', { signinType: type })
        .then(res => {
          if (res.success) {
            this.activities = res.result
          } else {
            console.log(res.message)
          }
        })
        .finally(() => {
          this.confirmLoading = false
        })
    },
    getType(type) {
      postAction('/suggest/category/list', { orgCode: this.orgCode() }).then(res => {
        if (res.success) {
          this.panes = res.result
          this.type = this.panes[0].dataId
          this.getList(this.type)
        } else {
          console.log(res.message)
        }
      })
    },
    handleChange(e) {
      this.type = e
      this.getList(this.type)
    },
    handleClick(item) {
      this.$emit('ok', item)
      this.visible = false
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth
      } else {
        this.drawerWidth = 700
      }
    },
    //窗口最大化切换
    toggleScreen() {
      if (this.modaltoggleFlag) {
        this.modalWidth = window.innerWidth
      } else {
        this.modalWidth = 800
      }
      this.modaltoggleFlag = !this.modaltoggleFlag
    },
    handleClose() {
      this.visible = false
    }
  }
}
</script>

<style scoped>
.avatar-uploader > .ant-upload {
  width: 104px;
  height: 104px;
}
.ant-upload-select-picture-card i {
  font-size: 49px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.drawer-bootom-button {
  position: absolute;
  bottom: -8px;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
.ant-list-item:hover {
  cursor: pointer;
  background-color: #fff1f0;
}
</style>

